<template>
    <view>
        <block v-for="(item, index) in swipeList" :key="index">
            <view
                :data-index="index"
                class="swipe_item"
                :style="{ right: item.right + 'rpx' }"
                @touchstart="drawStart"
                @touchmove="e => drawMove(e, index)"
                @touchend="drawEnd"
            >
                <view class="swipe_item_content" @click="clickEdit(item)">
                    <view class="info-all">
                        <image :src="item?.rewardImageUrl" mode="" class="img"></image>
                        <view class="right">
                            <view class="name">
                                {{ item?.rewardName }}
                            </view>
                            <view v-if="item?.description" class="description">
                                {{ item?.description }}
                            </view>
                        </view>
                    </view>
                </view>
                <view v-if="item.showRightMask" class="right_mask"></view>
                <view class="all_btn">
                    <view class="btn edit_btn" @click="clickEdit(item)">编辑</view>
                    <view class="btn delete_btn" @click="clickDelete(item)">删除</view>
                </view>
            </view>
        </block>
    </view>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue';
const props = defineProps({
    list: {
        type: Array,
        default: [],
    },
});
const emits = defineEmits(['handleSrcoll', 'handleEditBtn', 'handleDeleteBtn']);
const delBtnWidth = ref(240); // 左滑默认宽度

const startX = ref();

const swipeList = ref([]); // 数据列表

function drawStart(e) {
    let touch = e.touches[0];
    for (let index in swipeList.value) {
        swipeList.value[index].right = 0;
        swipeList.value[index].showRightMask = false;
    }
    startX.value = touch.clientX;
}

function drawMove(e, idx) {
    let touch = e.touches[0];
    let item = swipeList.value[e.currentTarget.dataset.index];
    let disX = startX.value - touch.clientX;
    if (disX >= 20) {
        if (disX > delBtnWidth.value) {
            disX = delBtnWidth.value;
        }
        swipeList.value[idx].showRightMask = true;
        emits('handleSrcoll', false);

        swipeList.value[e.currentTarget.dataset.index].right = disX;
    } else {
        emits('handleSrcoll', true);
        swipeList.value[idx].showRightMask = false;
        swipeList.value[e.currentTarget.dataset.index].right = 0;
    }
}

function drawEnd(e) {
    let item = swipeList.value[e.currentTarget.dataset.index];
    if (item.right >= delBtnWidth.value / 2) {
        emits('handleSrcoll', true);
        swipeList.value[e.currentTarget.dataset.index].right = delBtnWidth.value;
    } else {
        emits('handleSrcoll', true);
        swipeList.value[e.currentTarget.dataset.index].right = 0;
        for (let index in swipeList.value) {
            swipeList.value[index].showRightMask = false;
        }
    }
}

function clickEdit(i) {
    emits('handleEditBtn', i);
}

function clickDelete(i) {
    emits('handleDeleteBtn', i);
}

watch(
    () => props.list,
    val => {
        if (val) {
            swipeList.value = val;
        }
    },
    {
        immediate: true,
        deep: true,
    },
);
</script>

<style lang="scss" scoped>
.swipe_item {
    width: 100%;
    display: flex;
    position: relative;
    transition: all 0.2s;
    flex-direction: row;
    margin-bottom: 30rpx;

    &_content {
        width: 100%;
    }
}

.info-all {
    display: flex;
    padding: 30rpx 30rpx 40rpx 30rpx;
    border-radius: 20rpx;
    background-color: #fff;
    box-sizing: border-box;
    color: #333;

    .img {
        margin-right: 30rpx;
        width: 120rpx;
        height: 120rpx;
    }

    .right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 8rpx 0;
        width: calc(100vw - 270rpx);

        .name {
            font-size: 32rpx;
            font-weight: 500;
        }

        .description {
            margin: 20rpx 0 0 0;
            font-size: 28rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            box-sizing: border-box;
        }
    }
}

.right_mask {
    position: absolute;
    top: 0;
    right: 0;
    width: 20rpx;
    height: 190rpx;
    background-color: #fff;
}

.all_btn {
    position: absolute;
    top: 0;
    right: -240rpx;
    display: flex;
    height: 190rpx;

    .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 120rpx;
        height: 100%;
        color: #fff;
        font-size: 30rpx;
        font-weight: 500;
    }

    .edit_btn {
        background-color: #8885ff;
    }

    .delete_btn {
        background-color: #ff5e5e;
        border-radius: 0 20rpx 20rpx 0;
    }
}
</style>
